<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="score"/>
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80">良好</span>
    <span v-else-if="score>=70">中</span>
    <span v-else-if="score>=60">及格</span>
    <span v-if="score<60">不及格</span>
    <hr>
<h5 v-for="item in arr">{{item}}</h5>
<h6 v-for="(item,index) in arr">{{item}}==={{index}}</h6>
<hr>
    <div v-for="item in userList">
        <p>id号：{{item.id}}</p>
        <p>名称：{{item.name}}</p>
    </div>
    <hr>
    <div v-for="(value,key,index) in user">
        {{key}}===={{value}}00{{index}}</div>

</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{score: null,
            user:{id:200,name:"貂蝉",age:18},
            arr: ['安琪拉', '孙悟空', '猪八戒', '忍者神龟'],
            userList:[{id:100,name:"鲁班"},
                {id:101,name:"鲁123班"},
                {id:102,name:"鲁66666班"}]
        }
    })
</script>

</body>
</html>